<div id="stagemonitor-overlay">
	<iframe id="stagemonitor-modal"></iframe>
</div>

<script type="text/javascript">
	(function () {
		var stagemonitorWindow = document.getElementById("stagemonitor-modal").contentWindow;
		var contextPath = "@@CONTEXT_PREFIX_PATH@@";

		var xmlhttp = new XMLHttpRequest();
		xmlhttp.onreadystatechange = function () {
			if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
				var doc = stagemonitorWindow.document;
				doc.open();
				doc.write(xmlhttp.responseText
						.split("href=\"").join("href=\"" + contextPath)
						.split("src=\"").join("src=\"" + contextPath));
				doc.close();
			}
		};
		xmlhttp.open("GET", "@@CONTEXT_PREFIX_PATH@@/stagemonitor/static/stagemonitor-modal.html", true);
		xmlhttp.send();

		window.StagemonitorLoaded = function () {

			function isDomLoaded() {
				return document.readyState === "complete";
			}
			if (isDomLoaded()) {
				init();
			} else {
				document.onreadystatechange = function () {
					if (isDomLoaded()) {
						init();
					}
				};
			}
			function init() {
				var stagemonitorOverlayShow = document.getElementById("stagemonitor-overlay-show"),
					stagemonitorOverlay = document.getElementById("stagemonitor-overlay"),
					data = @@JSON_REQUEST_TRACE_PLACEHOLDER@@,
					configurationSources = @@CONFIGURATION_SOURCES@@,
					configurationOptions = @@CONFIGURATION_OPTIONS@@;

				stagemonitorWindow.stagemonitor.measurementSession = @@MEASUREMENT_SESSION@@;
				stagemonitorWindow.stagemonitor.pathsOfTabPlugins = @@PATHS_OF_TAB_PLUGINS@@;
				var connectionId = "@@CONNECTION_ID@@";
				addXMLRequestCallback( function( xhr ) {
					xhr.setRequestHeader("x-stagemonitor-connection-id", connectionId);
				});

				stagemonitorWindow.stagemonitor.openOverlay = function () {
					stagemonitorOverlay.style.display = "block";
					stagemonitorWindow.stagemonitor.onOpen();
					stagemonitorWindow.focus();
				};

				stagemonitorWindow.stagemonitor.closeOverlay = function () {
					stagemonitorOverlay.style.display = "none";
				};

				stagemonitorWindow.stagemonitor.initialize(data, configurationSources, configurationOptions,
						window.location.origin + "@@CONTEXT_PREFIX_PATH@@", contextPath,
						@@CONFIGURATION_PWD_SET@@, connectionId, @@PATHS_OF_WIDGET_METRIC_TAB_PLUGINS@@, @@OPEN_IMMEDIATELY@@);
				var thresholdExceeded = stagemonitorWindow.stagemonitor.thresholdExceeded;
				stagemonitorOverlayShow.className = thresholdExceeded ? "stagemonitor-threshold-exceeded" : "stagemonitor-threshold-ok";
				stagemonitorOverlayShow.addEventListener("click", stagemonitorWindow.stagemonitor.openOverlay);
			};

		};

		function generateUUID(){
			var d = new Date().getTime();
			return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
				var r = (d + Math.random() * 16) % 16 | 0;
				d = Math.floor(d / 16);
				return (c == 'x' ? r : (r & 0x7 | 0x8)).toString(16);
			});
		}

		function addXMLRequestCallback(callback){
			var oldSend, i;
			if( XMLHttpRequest.callbacks ) {
				// we've already overridden send() so just add the callback
				XMLHttpRequest.callbacks.push( callback );
			} else {
				// create a callback queue
				XMLHttpRequest.callbacks = [callback];
				// store the native send()
				oldSend = XMLHttpRequest.prototype.send;
				// override the native send()
				XMLHttpRequest.prototype.send = function(){
					// process the callback queue
					// the xhr instance is passed into each callback but seems pretty useless
					// you can't tell what its destination is or call abort() without an error
					// so only really good for logging that a request has happened
					// I could be wrong, I hope so...
					// EDIT: I suppose you could override the onreadystatechange handler though
					for( i = 0; i < XMLHttpRequest.callbacks.length; i++ ) {
						XMLHttpRequest.callbacks[i]( this );
					}
					// call the native send()
					oldSend.apply(this, arguments);
				}
			}
		}

	}());
</script>
<style>
	#stagemonitor-overlay {
		display: @@OVERLAY_DISPLAY@@;
		position: fixed;
		background-color: rgba(0, 0, 0, 0.5);
		width: 100%;
		height: 100%;
		z-index: 100000;
		top: 0;
		left: 0;
	}

	#stagemonitor-overlay-show {
		position: fixed;
		right: 3em;
		bottom: 3em;
		border-radius: 1em;
		padding: 0.5em;
		cursor: pointer;
		z-index: 999;
	}

	#stagemonitor-overlay-show:hover {
		background-color: rgba(0, 0, 0, 0.6);
	}

	.stagemonitor-threshold-ok {
		background-color: rgba(0, 0, 0, 0.5);
	}

	.stagemonitor-threshold-exceeded {
		background-color: #bf3636;
		-webkit-animation: togglebackground 4s infinite;
		animation: togglebackground 4s infinite;
	}

	@-webkit-keyframes togglebackground {
		0%   {background-color: rgba(0, 0, 0, 0.5);}
		30%  {background-color: #bf3636}
		60%  {background-color: #bf3636}
		100% {background-color: rgba(0, 0, 0, 0.5);}
	}

	@keyframes togglebackground {
		0%   {background-color: rgba(0, 0, 0, 0.5);}
		30%  {background-color: #bf3636}
		60%  {background-color: #bf3636}
		100% {background-color: rgba(0, 0, 0, 0.5);}
	}

	#stagemonitor-modal {
		height: 100%;
		width: 100%;
	}
</style>

<div id="stagemonitor-overlay-show" class="stagemonitor-threshold-ok">
	<img src="@@CONTEXT_PREFIX_PATH@@/stagemonitor/static/stagemonitor.png" />
</div>

